<template>
  <div class="wrapper" ref="wrap">
    <div class="content" ref="content">
      <div class="area border-topbottom">
        <div class="title">当前城市</div>
        <div class="list">
          <div class="buttom-wrapper">
            <div class="buttom">{{this.currentCity}}</div>
          </div>
        </div>
      </div>
      <div class="area border-topbottom">
        <div class="title">热门城市</div>
        <div class="list">
          <div
            class="buttom-wrapper"
            v-for="item in hotcities"
            :key="item.id"
            @click="handleCity(item.name)"
          >
            <div class="buttom">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="area" v-for="(item,key) in cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="list">
          <div
            class="item-list"
            v-for="inneritem in item"
            :key="inneritem.id"
            @click="handleCity(inneritem.name)"
          >
            <div class="item">{{inneritem.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BSroll from 'better-scroll'
import {mapState} from 'vuex'
export default {
  
  name: "List",
  props: ["cities", "hotcities", "location", "letter"],
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  
  methods: {
    handleCity(city) {
      this.$store.commit("changeCity", city);
      this.$router.push('/')
    },
  },
  mounted() {
    console.log(2)
    console.log(this.hotcities,this.cities)
    this.scroll = new BSroll(this.$refs.wrap, { click: true })
  },
  watch: {
    letter() {
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        this.scroll.scrollToElement(element);
        // console.log(element);
      }
    },
  },
  
};
</script>

<style lang="stylus" scoped>
.wrapper
  width 100%
  overflow hidden
  position absolute
  top 1.6rem
  left 0
  right 0
  bottom 0
  height 11.2rem
.area
  .title
    line-height 0.44rem
    background-color #dddddd
    padding-left 0.2rem
    color #666666
    font-size 0.26rem
    text-align left

  .list
    padding 0.1rem 0.6rem 0.1rem 0.1rem
    overflow hidden

    .buttom-wrapper
      width 100%

      .buttom
        float left
        margin 0.1rem
        width 28%
        height 0.4rem
        line-height 0.4rem
        border 0.02rem solid #ddd
        border-radius 0.1rem
        color #666666

    .item-list
      .item
        padding-left 0.2rem
        color #666666
        text-align left
        height 0.7rem
        line-height 0.7rem
        border-bottom 0.01rem solid #eeeeee
</style>